<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        #container {
            margin: 0 auto;
            overflow: hidden;
            border: 1px solid #ccc;
            display: flex;
            width: 265px;
            height: 265px;
        }
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
            user-select: none;
        }
        #container img {
            width: 265px;
            height: 265px;
            top: 0;
            left: 0;
            display: none;
        }
        #container img.active {
            display: block;
        }
    </style>
</head>
<body>
<div id="container">

</div>

<script>
    const container = document.getElementById('container');
    const totalImages = 190;
    const baseURL = 'https://media.imajize.com/4522818/frames/361551938/0;1;';
    const endURL = `.jpg/resize;w_265;h_265;bg_ffffff;f_inside/optimize;bg_ffffff/image`;
    const SWITCH_INTERVAL = 30;
    const SCALE_FACTOR =3;

    for (let i = 1; i <= totalImages; i++) {
        const img = document.createElement('img');
        img.src = `${baseURL}${String(i).padStart(3, '0')}${endURL}`;
        img.draggable = false;
        if (i === 1) {
            img.classList.add('active');
        }
        container.appendChild(img);
    }

    const images = document.querySelectorAll('#container img');
    let currentIndex = 0;
    let isDragging = false;
    let startX = 0;
    let startTime = 0;
    let dx;
    let autoRotateInterval;
    let inertiaTimeout;
    let speed = 0;
    function startAutoRotate() {
        if (!autoRotateInterval) {
            autoRotateInterval = setInterval(() => {
                currentIndex = (currentIndex + 1) % images.length;
                updateImages();
            }, SWITCH_INTERVAL);
        }
    }

    function stopAutoRotate() {
        clearInterval(autoRotateInterval);
        autoRotateInterval = null;
    }

    function updateImages() {
        images.forEach((img, index) => {
            img.classList.toggle('active', index === currentIndex);
        });
    }

    function handleInertia(speed) {
        if (Math.abs(speed) < 10) {
            clearInterval(inertiaTimeout)
            startAutoRotate();
            return
        }
        inertiaTimeout = setTimeout(() => {
            currentIndex = (currentIndex - Math.sign(speed) + images.length) % images.length;
            console.log(' Math.sign(speed)', Math.sign(speed),'currentIndex',currentIndex)
            updateImages();
            speed *= 0.9;
            handleInertia(speed);
        },  Math.abs(100 / speed));


    }

    container.addEventListener('mousedown', (event) => {
        isDragging = true;
        startX = event.clientX;
        startTime = Date.now();
        stopAutoRotate();
        speed = 0; 
        stopAutoRotate()
        clearInterval(inertiaTimeout)
    });

    document.addEventListener('mousemove', (event) => {
        if (!isDragging) return;
       dx = event.clientX - startX;

        if (Math.abs(dx) > 5) {
            const increment = Math.round(dx / SCALE_FACTOR);
            currentIndex = (currentIndex - increment + images.length) % images.length;
            updateImages();
            startX = event.clientX;
        }
    });

    document.addEventListener('mouseup', () => {
        speed = dx*10000  / (Date.now() - startTime); 
        console.log('speed',speed)
        isDragging = false;
        handleInertia(speed);
    });

    container.addEventListener('click', () => {
        if (autoRotateInterval) {
            stopAutoRotate();
        } else {
            startAutoRotate();
        }
    });

    startAutoRotate();
</script>
</body>
</html>